<!--
 * @Author: 白袂 1741866590@qq.com
 * @Date: 2023-09-04 21:24:41
 * @LastEditors: 白袂 1741866590@qq.com
 * @LastEditTime: 2024-05-09 21:37:53
 * @FilePath: \obj_system\src\views\login\Login.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>

    <div class="login">
         <h1>餐&nbsp;厅&nbsp;后&nbsp;台&nbsp;管&nbsp;理&nbsp;系&nbsp;统</h1>

        <div class="box">
            <login-code-vue v-show="login" @loginOrSign="loginOrSign"></login-code-vue>
            <sign v-show="!login" @signOrLogin="signOrLogin"></sign>
        </div>
    </div>
</template>

<script>
import LoginCodeVue from './LoginCode.vue';
import Sign from './Sign.vue'
// import axios from "../../untils/http";
export default {
    name: "Login",
    components: {
        LoginCodeVue,
        Sign
    },
    data() {
        return {
            login: true
        }
    },
    methods: {
        loginOrSign(msg) {
            this.login = msg;
            // console.log("接受到子组件的msg", false)
        },
        signOrLogin(msg) {
            this.login = msg;
        }
    }
}
</script>

<style lang="less" scoped>
// @font-face {
//     font-family: 'MyCustomFont';
//     src: url('./../../../public/font/长城中隶体.TTF') format('truetype');
// }
// /deep/ 
.login {
    position: relative;
    width: 100vw;
    height: 100vh;
    background-color: #8abcd1;
    

}

h1 {
    font-family: "myFont-family";
    width: 60%;
    margin: 0 auto;
    padding-top: 7vh;
    padding-bottom: 2vh;
    text-align: center;
    font-size: 37px;
    font-weight: bold;
    color: #3170a7;  //#66a9c9
    text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
    // border: 1px solid #000;
    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1); /* 下边框阴影 */

    img {
        width: 60px;
    }
}

// .box {
//     margin: 0 auto;
//     top: 22vh;
//     left: 33%;
//     width: 60%;
//     height: 55vh;
//     padding: 20px 20px 0 20px;
//     border: 2px solid rgba(198, 230, 232, 0.2);
//     border-radius: 20px;
//     background-color: #c3d7df;
//     text-align: left;
// }

 /deep/ .el-form-item__label {
     text-align: center;
 }
  
</style>